<template>
  <div class="right-wrap con-wrap">
    <h2>表单内容</h2>
    <form-comp
      class="input-bgc"
      :form-item="optionFormItem"
      v-model:formData="optionFormData"
    >
      <template v-slot:handlerSlot>
        <el-button-group type="primary" size="small">
          <el-button link :icon="Top" @click="onCustomItemMove('up')">
            上移
          </el-button>
          <el-button link :icon="Bottom" @click="onCustomItemMove('down')">
            下移
          </el-button>
          <el-button link :icon="Delete" @click="onCustomItemMove('del')">
            删除
          </el-button>
        </el-button-group>
      </template>
      <template v-slot:tableSlot>
        <el-row :gutter="10">
          <el-col :span="12" class="flex-yc">
            行&nbsp;
            <el-input
              type="number"
              min="1"
              max="10"
              v-model="optionFormData.table[0]"
            ></el-input>
          </el-col>
          <el-col :span="12" class="flex-yc">
            列&nbsp;
            <el-input
              type="number"
              min="1"
              max="10"
              v-model="optionFormData.table[1]"
            ></el-input>
          </el-col>
        </el-row>
      </template>
      <template v-slot:spacingSlot>
        <div class="flex-yc">
          <el-input
            placeholder="间距"
            type="number"
            v-model="optionFormData.spacing"
          ></el-input>
          <span style="flex-shrink: 0; margin-left: 5px">像素</span>
        </div>
      </template>
    </form-comp>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, watch } from 'vue'
import FormComp from '@/components/form/form.vue'
import { Bottom, Delete, Top } from '@element-plus/icons-vue'
import { FormItemType } from '@/components/form/type'
import { formItemType, OptionFormDataType } from '../template/type'
import emitter from '@/utils/emitter.ts'

const optionFormData = reactive<OptionFormDataType>({
  title: '',
  tip: '',
  backgroundColor: '',
  order: '',
  explain: '',
  table: [0, 0],
  spacing: '',
})
const optionFormItem = reactive<FormItemType[]>([
  { type: 'input', label: '标题名：', prop: 'title' },
  { type: 'input', label: '提示文字：', prop: 'tip' },
  { type: 'input', label: '背景色：', prop: 'backgroundColor' },
  { type: 'input', label: '序号：', prop: 'order' },
  { type: 'textarea', label: '说明：', prop: 'explain' },
  { type: 'slot', label: '表格：', prop: 'table', slotName: 'tableSlot' },
  { type: 'slot', label: '间距：', prop: 'spacing', slotName: 'spacingSlot' },
  { type: 'slot', label: '操作：', prop: 'handler', slotName: 'handlerSlot' },
])
onMounted(() => {
  emitter.on('onChangeOptionFormData', onChangeOptionFormData)
})
onUnmounted(() => {
  emitter.off('onChangeOptionFormData')
})

const onChangeOptionFormData = (val: formItemType) => {
  optionFormData.title = val.label
  optionFormData.tip = val.placeholder || ''
  optionFormData.backgroundColor = val.bgColor || ''
  optionFormData.order = val.order || ''
  optionFormData.explain = val.description || ''
  optionFormData.table = [
    val.tableContent?.length || 0,
    val.tableThContent?.length || 0,
  ]
  optionFormData.spacing = val.spacing || ''
}
// 点击上移下移
const onCustomItemMove = (type: string) => {
  emitter.emit('onCustomItemMove', type)
}

watch(optionFormData, (val) => {
  emitter.emit('onChangeFormItem', val)
})
</script>

<style scoped lang="scss">
.right-wrap {
  width: 300px;

  :deep(.el-form-item) {
    button[type='button'] {
      margin-right: 10px;
    }

    .flex-yc {
      display: flex;
      align-items: center;
    }
  }
}
</style>
